<template>
  <div class="add-edit">
    <el-form :model="ruleForm"
             :rules="rules"
             ref="ruleForm"
             label-width="100px"
             class="yuyi-ruleForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户名" prop="userName">
            <el-input size="small" :disabled="type==='see'" v-model="ruleForm.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="gender">
            <el-radio v-model="ruleForm.gender" :disabled="type==='see'" label="1">男</el-radio>
            <el-radio v-model="ruleForm.gender" :disabled="type==='see'" label="0">女</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户昵称" prop="nickName">
            <el-input size="small" :disabled="type==='see'" v-model="ruleForm.nickName"></el-input>
          </el-form-item>
        </el-col>

        <!--<el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input size="small" :disabled="type==='see'" type="password" v-model="ruleForm.password"></el-input>
          </el-form-item>
        </el-col>-->

        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input size="small" :disabled="type==='see'" v-model="ruleForm.age"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="所属机构" prop="idOrg">
            <el-cascader :options="options"
                         size="small"
                         style="width: 100%;"
                         @change="handleOrgChange"
                         :value="ruleForm.idOrg"
                         :disabled="type==='see'"
                         :props="treeProps"
                         :show-all-levels="false"></el-cascader>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="电话">
            <el-input size="small" :disabled="type==='see'" v-model="ruleForm.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="邮箱">
            <el-input size="small" :disabled="type==='see'" v-model="ruleForm.email"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注">
            <el-input size="small"
                      type="textarea"
                      show-word-limit
                      maxlength="200"
                      :disabled="type==='see'"
                      :autosize="autosize"
                      v-model="ruleForm.remark"></el-input>
          </el-form-item>
        </el-col>

      </el-row>

      <el-form-item v-if="type!=='see'">
        <el-button @click="handleSubmit"
                   type="primary"
                   :loading="loading"
                   size="small">
          {{ type === 'add' ? '确定新增' : '确定修改' }}
        </el-button>
        <el-button style="margin-left: 10px" size="small" @click="handleEmpty">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addUser, editUser, getQzOrg, seeUser } from '../../../../../api/user/userSet'

export default {
  name: 'addEdit',
  props: {
    type: {
      type: String,
      default: () => 'add'
    },
    editData: {
      type: Object
    }
  },
  data () {
    return {
      loading: false,
      treeProps: {
        value: 'id',
        label: 'orgName',
        children: 'children'
      },
      autosize: {
        minRows: 4,
        maxRows: 6
      },
      treeForm: {},
      ruleForm: {
        userName: '', // 用户名
        nickName: '', // 用户昵称
        // password: '', // 密码
        age: '', // 年龄
        idOrg: '', // 所属机构
        gender: '', // 性别
        phone: '', // 电话
        email: '', // 邮箱
        remark: '' // 备注
      },
      rules: {
        userName: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        nickName: [
          {
            required: true,
            message: '请输入用户昵称',
            trigger: 'blur'
          }
        ],
        idOrg: [
          {
            required: true,
            message: '请选择所属机构',
            trigger: 'blur'
          }
        ],
        gender: [
          {
            required: true,
            message: '请选择性别',
            trigger: 'blur'
          }
        ]
      },
      options: []
    }
  },
  mounted () {
    this.handleEmpty()
    this.getSelectData()
    if (this.type === 'edit' || this.type === 'see') {
      this.handleSet()
    }
  },
  watch: {
    type () {
      this.handleEmpty()
      if (this.type === 'edit' || this.type === 'see') {
        this.handleSet()
      }
    }
  },
  methods: {
    getSelectData () {
      getQzOrg().then(res => {
        this.options = res.data.data
      })
    },
    handleSet () {
      seeUser(this.editData.id).then(res => {
        Object.keys(this.ruleForm).forEach((key) => {
          this.ruleForm[key] = res.data.data[key]
        })
        this.ruleForm.id = res.data.data.id
      })
    },
    handleOrgChange (v) {
      this.ruleForm.idOrg = v[1]
    },
    handleSubmit () {
      // 提交
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.type === 'add') {
            delete this.ruleForm.id
          }
          delete this.ruleForm.password
          const result = this.type === 'add' ? addUser(this.ruleForm) : editUser(this.ruleForm)
          result.then(() => {
            this.handleEmpty()
            this.$message({
              message: '新增用户信息成功',
              type: 'success'
            })
            this.$emit('handleSuccess')
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    handleEmpty () {
      // 清空内容
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
  .add-edit {
    padding-right: 40px;
  }

  .bumen {
    width: 100%;
  }

</style>
